<template>
	<view>
	
	
	<uni-popup ref="popup" type="center" backgroundColor="transparent">
		<view class="zu_box">
			<view class="chakn" @click="cancer"></view>
			<view class="title">帮助好友助力</view>
			<view class="xin_box">
				<view class="xin_btn" :class="{you:true}"></view>
				<view class="xin_btn" :class="{you:false}"></view>
				<view class="xin_btn" :class="{you:false}"></view>
				<view class="xin_btn" :class="{you:false}"></view>
			</view>
			<view class="bkmn">
				<view class="yq_bosx">
					<view class="yq_btn">
						<image class="toux" src="../filePages/static/jx.png"></image>
					</view>
					<view class="yq_btn">
						<!-- <image class="toux" src="../filePages/static/jx.png"></image> -->
					</view>
					<view class="yq_btn">
						<!-- <image class="toux" src="../filePages/static/jx.png"></image> -->
					</view>
					<view class="yq_btn">
						<!-- <image class="toux" src="../filePages/static/jx.png"></image> -->
					</view>
				</view>
				
				<view class="yq_r">
					<view class="numk">1</view>
					<view class="yit">已点亮</view>
				</view>
				
			</view>
			
			<view class="band">帮助点亮</view>
			
		</view>
	</uni-popup>
	
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				
				
			}
		},
		components:{
	
		},
		computed: {
			
		},
		onLoad() {
			
		},
		methods: {
			open(){
				this.$refs.popup.open()
			},
			cancer(){
				this.$refs.popup.close()
			},
		}
	}
</script>

<style scoped lang="scss">
.zu_box{
	width: 618upx;
	height: 554upx;
	background: #F9FAFA;
	border-radius: 28upx;
	position: relative;
	.chakn{
		position: absolute;
		width:36upx;
		height:36upx;
		background: url(../../static/answer/guan.png)no-repeat center;
		background-size:100%;
		right:32upx;
		top:32upx;
	}
	.title{
		text-align: center;
		color:#333;
		padding-top:60upx;
		font-size:40upx;
		font-weight: 550;
	}
	.xin_box{
		width:460upx;
		margin:0 auto;
		margin-top:50upx;
		display: flex;
		justify-content: space-between;
		.xin_btn{
			width:78upx;
			height:78upx;
			background: url(../../static/answer/x.png)no-repeat center;
			background-size:100%;
			&.you{
				background: url(../../static/answer/xm.png)no-repeat center;
				background-size:100%;
			}
		}
	}
}
.bkmn{
	width: 496upx;
	height: 132upx;
	background: #F3F5F6;
	border-radius: 16upx;
	margin:0 auto;
	margin-top:42upx;
	display: flex;
	justify-content: space-between;

	.yq_bosx{
		width:324upx;
		margin-left:36upx;
		display: flex;
		justify-content: space-between;
		.yq_btn{
			width:60upx;
			height:60upx;
			margin-top:36upx;
			background: url(../../static/answer/yao.png)no-repeat center;
			background-size:100%;
			.toux{
				width:100%;
				height:100%;
				border-radius: 50%;
			}
		}
	}
	.yq_r{
		width:90upx;
		text-align: center;
		margin-top:26upx;
		.numk{
			color:#F27109;
			font-size:36upx;
			
		}
		.yit{
			color:#333333;
			font-size:20upx;
			margin-top:5upx;
		}
	}
	}
.band{
	width: 546upx;
	height: 80upx;
	background: linear-gradient(154deg, #F08A38 0%, #F06B00 100%);
	border-radius: 40upx;
	margin:0 auto;
	margin-top:36upx;
	color:#fff;
	font-size:28upx;
	line-height: 80upx;
	text-align: center;
}
</style>
